<template>
	<view class="seckill">
		<view class="header">
			<view class="header-l-item seckill-text">限时秒杀</view>
			<view class="header-l-item time">
				<text>剩余: </text>
        <view class="time-item">{{ d }}</view>
        <span class="point">天</span>
				<view class="time-item">{{ h }}</view>
				<span class="point">时</span>
				<view class="time-item">{{ m }}</view>
				<span class="point">分</span>
				<view class="time-item">{{ s }}</view>
				<span class="point">秒</span>
			</view>
		</view>
		<view>
			<view class="commodity">
				<view @tap="goDetail(item.skuId)" class="commodity-item" v-for="item in seckillList"
					:key="item.id">
					<image class="commodity-cover" :src="item.cover" mode=""></image>
					<view class="commodity-content">
						<view class="price-box">
							<text class="price-prefix">¥</text>
							<text class="orignal-price">{{ item.price }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import moment from 'moment'
	export default {
		data() {
			return {
				seckillList:[],
				startTime: '',
				endTime: '',
        d: '',
				h: '',
				m:'',
				s: '',
				moment: moment
			}
		},
		created() {
			this.getSeckill()
		},
		methods: {
			goDetail(skuId) {
				uni.navigateTo({
					url: '/pages/product/product?skuId=' + skuId
				})
			},
			getSeckill() {
				$http.request({
					url: '/coupon/seckill/getSeckill'
				}).then(res => {
					if(res.success) {
						this.seckillList = res.data
						if(this.seckillList && this.seckillList.length > 0) {
							this.startTime = this.seckillList[0].startTime
							this.endTime = this.seckillList[0].endTime
							this.countdown(this.endTime)
						}
					}
				})
			},
      countdown(time) {
        // 给定的结束日期时间
        const endDate = moment(time, "YYYY-MM-DD HH:mm:ss");

        this.interval = setInterval(() => {
          // 计算当前日期与结束日期之间的时间差
          let duration = moment.duration(endDate.diff(moment()));

          // 获取相应的天、小时、分钟和秒数
          this.d = Math.floor(duration / (1000 * 60 * 60 * 24));
          this.h = Math.floor((duration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          this.m = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
          this.s = Math.floor((duration % (1000 * 60)) / 1000);


          // 如果已经过了结束日期，则停止倒计时
          if (duration.asMilliseconds() <= 0) {
            clearInterval(this.interval);
          }

        }, 1000);
      }
		}
	}
</script>

<style scoped>
	.commodity {
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	.commodity-item {
		padding-bottom: 20rpx;
		width: 130rpx;
		margin-left: 10rpx;
	}

	.price-prefix {
		color: #FFF;
		font-size: 16rpx;
		font-weight: 700;
		padding: 3rpx;
	}

	.price-box {
		margin-top: 12rpx;
	}

	.orignal-price {
		font-weight: bold;
		color: #FFF;
		font-size: 30rpx;
	}

	.commodity-cover {
		width: 100%;
		height: 130rpx;
	}
	.commodity-content {
		text-align: center;
	}
	.seckill {
		margin: 20rpx auto;
		width: 90%;
		height: 260rpx;
		background-color: #FF6A6C;
		border-radius: 10rpx;
		color: #FFF;
		padding: 20rpx;
	}
	.seckill-text {
		font-size: 28rpx;
		font-weight: bold;
	}
	.time {

	}
	.point {
		font-weight: bold;
		margin: 0 3rpx;
	}
	.session {
		color: #FF4E4C;
		font-weight: bold;
		font-size: 25rpx;
	}
	.more-seckill {
		width: 30rpx;
		height: 30rpx;
	}
	.more-item {
		display: inline-block;
	}
	.time-item {
		display: inline-block;
		padding: 5rpx;
		border-radius: 8rpx;
		width: 40rpx;
		text-align: center;
		background-color: #FFF;
		color: #FD5242;
	}
	.header {
		display: flex;
		justify-content: space-between;
	}
	.header-left {
		width: 55%;
		display: flex;
		justify-content: space-between;
	}
	.header-l-item {
		display: inline-block;
	}
</style>
